<template>
  <div class="card-wrapper">
    <el-row class="card-header" v-if="$slots.header || title">
      <el-col :span="24"  style="position: relative;line-height: 42px;height: 42px">
        <span  class="card-span"></span>
        <slot name="header">
          <span class="title">{{title}}</span>
          <slot name="header-right">
            <span class="more" v-if="more && moreHandler " @click="moreHandler">{{more}}</span>
          </slot>
        </slot>
      </el-col>
    </el-row>
    <el-row class="card-body">
      <el-col :span="24">
        <slot></slot>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'BaseCard',
  props: {
    title: {
      type: String,
      default: null
    },
    more: {
      type: String,
      default: null
    },
    moreHandler: {
      type: Function
    }
  }
}
</script>
<style lang="scss">
.card-wrapper{
  width: 100%;
  background:rgba(255,255,255,1);
  border-radius:3px;
  padding: 3px;
  .card-header{
    height: 42px;
    .card-span{
      position: absolute;
      width:5px;
      height:16px;
      background:var(--primaryBtn);
      left: 0;
      top:50%;
      transform: translateY(-50%);
    }
    .title{
      color: #333333FF;
      font-size:14px ;
      position: absolute;
      left: 20px;
      top:50%;
      transform: translateY(-50%);
    }
    .more{
      color: #999999FF;
      position: absolute;
      right: 20px;
      top:50%;
      transform: translateY(-50%);
      cursor: pointer;
    }
  }
}
</style>
